<template>
	<view class="interaction page pd-30">
		<comHead :datas="datasObj"></comHead>

		<view class="flex-bwt top">
			<view class="tabBox flex-eve">
				<view class="tab flex-center ft ft-28" v-for="(item, index) in tabArray" :key="index"
					:class="{ active: currentTab == index }" @click="selectTab(index)">
					{{ item.desc }}
					<text class="num ft c-ff" v-if="item.num">{{ item.num }}</text>
				</view>
			</view>

		</view>

		<view class="msgList">
			<view class="msgItem" v-for="(item, index) in msgList" :key="index" @longpress="item.showDel = 1">
				<view class="ft mt-30 c-99 flex-center">{{ item.created_at }}</view>
				<view class="card1 mt-10 pd-20">
					<view class="flex-bwt">
						<view class="ft1">
							<text class="ft1"><text
									style="display: inline-block;width: 8rpx;height: 8rpx;border-radius: 50rpx;background-color: #FF0000;margin-right: 10rpx;flex-shrink: 0;"
									v-if="item.is_read == 0"></text>{{ item.title }}</text>
						</view>
						<view class="ft c-99" v-if="item.title == '我参与回答'">{{ item.info.question_info.total + "人回答了" }}
						</view>
						<view class="ft c-99" v-else>{{ item.info.answer_data.pageInfo.total + "人回答了" }}</view>
					</view>

					<view class="card2 mt-20 flex-bwt pd-20" style="align-items: flex-start;">
						<view class="left" v-if="item.title == '我参与回答'">
							<view>
								<view class="flex" style="align-items: flex-start;">
									<view class="wen ft c-ff">问</view>
									<view class="problem ml-20 ft1">{{ item.info.question_info.name }}</view>
								</view>
								<view class="flex mt-20" style="align-items: flex-start;">
									<view class="da ft">{{ '答' }}</view>
									<view class="problem ft ml-20 c-99">
										{{ item.info.content ?? '' }}
										<text class="nameTitle ml-8" v-if="item.info.user_info?.sale_id > 0">认证老师</text>

									</view>
								</view>
							</view>
							<view class="huifu mt-20 ft  flex-center"
								@click="goDetail(item, item.info.question_info.id)">回答问题
							</view>
						</view>
						<view class="left" v-else>
							<view>
								<view class="flex" style="align-items: flex-start;">
									<view class="wen ft c-ff">问</view>
									<view class="problem ml-20 ft1">{{ item.info.name }}</view>
								</view>
								<view class="flex mt-20" style="align-items: flex-start;">
									<view class="da ft">{{ '答' }}</view>
									<view class="problem ft ml-20 c-99">
										{{ item.info.answer_data.items.length > 0 ?
											item.info.answer_data.items[0].content : '待回答' }}
									</view>
								</view>
							</view>
							<view v-if="item.title == '待我回答'" class="huifu mt-20 ft  flex-center"
								@click="goDetail(item, item.info.id)">回答问题</view>
						</view>
						<view class="right" v-if="item.info?.question_info?.product_info?.cover">
							<image class="wh-100 bd-r40" mode="aspectFill"
								:src="item.info?.question_info?.product_info?.cover"></image>
						</view>
						<view class="right" v-else-if="item.info?.product_info?.cover">
							<image class="wh-100 bd-r40" mode="aspectFill" :src="item.info?.product_info?.cover">
							</image>
						</view>
					</view>
					<view class="watch flex-center"
						@click="goDetail(item, item.title == '我参与回答' ? item.info.question_info.id : item.info.id)">
						<text class="ft">查看详情</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
					<view class="del-btn flex-center" v-if="item.showDel == 1" @click="delMsg(item.id, index)">
						<image class="bg" src="https://cdn.oss.bon-top.cn/static_bc/images/del_msg_bg.png"></image>
						<view class="shadow"></view>
						<view class="txt">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="com-empty" v-if="msgList.length == 0">暂无数据</view>

		<view style="height: 184rpx;"></view>
		<view class="btnGroup">
			<view class="btn1 flex-eve">
				<view class="allClear flex-center" @click="showClear = true">{{ "一键清空" }}</view>
				<view class="noRead flex-center" @click="show = true">{{ "一键标记已读" }}</view>
			</view>
		</view>
		<up-modal width="518rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="show"
			:title="title" :showCancelButton="true" :content='content'></up-modal>
		<up-modal width="518rpx" @confirm="clearConfirm" @cancel="clearCancel" contentTextAlign="center"
			:show="showClear" :title="clearTitle" :showCancelButton="true" :content='clearContent'></up-modal>
		<up-modal width="518rpx" @confirm="delMsgConfirm" @cancel="delMsgCancel" contentTextAlign="center"
			:show="showDelMsg" :title="'删除消息'" :showCancelButton="true" :content="'确定要删除消息吗？'"></up-modal>
	</view>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from "vue";
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";

import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '问答互动消息',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	isBorder: true
})
const goDetail = (item, id) => {

	// let id = item.title == '我参与回答' ? item.info.question_info.id : item.info.id


	// 当前为@评论我 并且有新消息 标记已读
	// setTimeout(() => {
	isInit.value = 1
	utils
		.request(
			api.messageRead, {
			type: type.value,
			id: item.id
		},
			"post"
		)
		.then((res) => {
			// getMsgListData()
			// reloadData()
			item.is_read = 1

		});
	// }, 1000)



	uni.navigateTo({
		url: '/subpackage/message/interlocutDetail?data=' + JSON.stringify({ id: id, showPup: false })
	})
}

const tabArray = ref([{
	desc: '全部',
	num: null
}, {
	desc: '我的问题',
	num: 0
}, {
	desc: '我参与回答',
	num: 0
},
{
	desc: '待我回答',
	num: 0
}

]);

const currentTab = ref(0);
const selectTab = (index) => {
	currentTab.value = index;

	reloadData()
};


const reloadData = () => {
	msgPage.value = 1
	msgList.value = []
	msgLoading.value = true
	getMsgListData()
}

//获取消息列表
const msgPage = ref(1)
const msgList = ref([])
const msgLoading = ref(true)
const getMsgListData = () => {
	if (!msgLoading.value) {
		return
	}
	uni.showLoading()
	msgLoading.value = false
	utils
		.request(
			api.messageList, {
			page: msgPage.value,
			pageSize: 10,
			type: type.value,
			tag_id: currentTab.value,
		},
			"get"
		)
		.then((res) => {
			if (isInit.value == 1) {
				tabArray.value[1].num = res.data.myQuestionUnreadNum
				tabArray.value[2].num = res.data.myAnswerUnreadNum
				tabArray.value[3].num = res.data.waitAnswerUnreadNum
				isInit.value = 0
			}
			msgPage.value++
			if (res.data.items.length > 0) {
				msgList.value = msgList.value.concat(res.data.items)
			}
			if (msgPage.value <= res.data.pageInfo.totalPage) {
				msgLoading.value = true
			}
			uni.hideLoading()
		});
};
onReachBottom(() => {
	getMsgListData()
})
const type = ref('')
const isInit = ref(1)
onLoad((options) => {
	type.value = options.type ? options.type : ''
	if (options.tag_id) {
		currentTab.value = options.tag_id
	}
	getMsgListData()
})

const show = ref(false)
const title = ref('一键标记已读');
const content = ref('确定要一键标记所有消息已读吗？');
const confirm = () => {
	show.value = false
	utils
		.request(
			api.messageRead, {
			is_all: 1,
			type: type.value,
		},
			"post"
		)
		.then((res) => {
			tabArray.value[1].num = 0
			tabArray.value[2].num = 0
			tabArray.value[3].num = 0

			reloadData()
		});
}
const cancel = () => {
	show.value = false
}

const showClear = ref(false)
const clearTitle = ref('一键清空');
const clearContent = ref('确定要一键清空所有消息吗？');
const clearConfirm = () => {
	showClear.value = false
	utils
		.request(
			api.messageDelete, {
			is_all: 1,
			type: type.value
		},
			"post"
		)
		.then((res) => {
			tabArray.value[1].num = 0
			tabArray.value[2].num = 0
			tabArray.value[3].num = 0

			msgList.value = []
			msgLoading.value = false
		});
}
const clearCancel = () => {
	showClear.value = false
}

const showDelMsg = ref(false)
const showDelId = ref(0)
const showDelIndex = ref(0)
const delMsg = (id, index) => {
	showDelMsg.value = true
	showDelId.value = id
	showDelIndex.value = index
}
const delMsgCancel = () => {
	showDelMsg.value = false
	msgList.value[showDelIndex.value].showDel = 0
}
const delMsgConfirm = () => {
	showDelMsg.value = false
	utils
		.request(
			api.messageDelete, {
			id: showDelId.value
		},
			"post"
		)
		.then((res) => {
			msgList.value.splice(showDelIndex.value, 1);

			// isInit.value = 1
			// reloadData()
		});
}
</script>

<style lang="scss" scoped>
.ft {
	word-break: break-all;
}

.top {
	// width: 100%;
	// height: 120rpx;
	// border: rgb(11, 11, 1) 2rpx solid;
}

.nameTitle {
	display: inline-block;
	padding: 4rpx;
	background: #DBF046;
	border-radius: 8rpx;
	font-size: 20rpx;
	color: #333333;
	font-weight: 400;
}

.card1 {
	width: 690rpx;
	background: #f8f8f8;
	border-radius: 40rpx;
	position: relative;

	.del-btn {
		position: absolute;
		top: 50rpx;
		left: 316rpx;
		z-index: 1;
		width: 128rpx;
		height: 94rpx;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 128rpx;
			height: 94rpx;
			z-index: 1;
		}

		.shadow {
			width: 128rpx;
			height: 74rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			position: absolute;
			top: 20rpx;
			left: 0;
			z-index: 2;
		}

		.txt {
			position: absolute;
			top: 40rpx;
			left: 40rpx;
			font-weight: 800;
			font-size: 24rpx;
			color: #333333;
			z-index: 3;
		}
	}

	.card2 {
		width: 650rpx;
		background: #ffffff;
		border-radius: 40rpx;

		.huifu {

			width: 136rpx;
			height: 58rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			color: #ffffff;
		}

		.left {
			flex: 1;
			// background: red;
			// height: 146rpx;

			.wen {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #333333;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.da {
				width: 40rpx;
				height: 40rpx;

				line-height: 40rpx;

				text-align: center;
				background: #dbf046;
				border-radius: 50%;
				flex-shrink: 0;
			}
		}

		.right {
			width: 116rpx;
			height: 146rpx;
			border-radius: 40rpx;
			position: relative;

			.tubiao {
				z-index: 3;
				position: absolute;
				left: 12rpx;
				top: 12rpx;
			}
		}
	}

	.watch {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
}

.tabBox {
	width: 680rpx;

	//border: 2rpx solid red;
	.tab {
		position: relative;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 72rpx;
		background: #f8f8f8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.num {
			position: absolute;
			text-align: center;
			top: -8rpx;
			right: 0;
			// width: 44rpx;
			padding: 0 10rpx;
			height: 28rpx;
			line-height: 28rpx;
			background: #ff0000;
			font-size: 20rpx;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
		}
	}

	.active {
		background: #dbf046;
	}
}

.mark {
	width: 48rpx;
	height: 36rpx;
	background: #333333;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-size: 20rpx;
	color: #ffffff;
	padding: 8rpx;
}

.mark1 {
	padding: 8rpx;
	width: 48rpx;
	height: 36rpx;
	background: #dbf046;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-size: 20rpx;
}

.sift {
	position: relative;

	.card {
		position: absolute;
		z-index: 10;
		background: #fff;
		bottom: -210rpx;
		left: -28rpx;
		border-radius: 20rpx;
		//border: 2rpx solid red;
		width: 128rpx;
		height: 202rpx;

		.item {
			width: 50rpx;
			margin: auto;
			margin-top: 24rpx;
		}

		.act {
			font-weight: 800;
			font-size: 24rpx;
			color: #333333;
		}
	}
}

.scroll-Y {
	// border: 2rpx solid #000;
	height: 1150rpx;
	width: 100%;
}

.btnGroup {
	width: 750rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #f8f8f8;
	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	z-index: 99;

	.btn1 {
		//border: 2rpx solid red;
		width: 750rpx;
		height: 118rpx;
		background: #f8f8f8;

		.allClear {
			width: 196rpx;
			height: 78rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}

		.noRead {
			width: 454rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #dbf046;
		}
	}
}
</style>